<template>
    <div class="center-preview"
         :style='{"width":"1200px","margin":"0px auto","position":"relative","background":"none"}'>
        <div class="title"
             :style='{"padding":"40px 0 30px","margin":"20px auto 20px","borderColor":"#a2e9ec","color":"#00adb5","textAlign":"center","borderRadius":"0 0 4px 4px","background":"url(http://codegen.caihongy.cn/20221123/c9c8672afe48414f86a45016ddd346b4.png) no-repeat center top,radial-gradient(circle, rgba(237,250,251,1) 35%, rgba(162,233,236,1) 100%)","borderWidth":"1px","width":"100%","fontSize":"30px","lineHeight":"30px","borderStyle":"solid","fontWeight":"600"}'>
            {{ title }}
        </div>

        <el-tabs tab-position="left"
                 :style='{"border":"10px solid #fff","padding":"10px 0px","boxShadow":"0px 2px 6px #ccc,inset 0px 0px 0px 0px #e0f8e8","margin":"20px auto 30px auto","borderRadius":"4px","flexWrap":"wrap","background":"url(http://codegen.caihongy.cn/20221123/02b65dd190a741a1ae9c37c17624c5aa.jpg) fixed no-repeat center top,#fff","display":"flex","width":"100%","backgroundSize":"100%","justifyContent":"space-around"}'
                 @tab-click="handleClick">
            <el-tab-pane label="个人中心">
                <el-form class="center-preview-pv" ref="sessionForm" :model="sessionForm" :rules="rules"
                         label-width="80px">
                    <el-form-item
                            :style='{"border":"0px solid #eee","padding":"10px","boxShadow":"0px 0px 0px #eee","margin":"0 0 10px","borderRadius":"0px","background":"none"}'
                            v-if="userTableName=='user'" label="账号" prop="account">
                        <el-input v-model="sessionForm.account" placeholder="账号" readonly></el-input>
                    </el-form-item>
                    <el-form-item
                            :style='{"border":"0px solid #eee","padding":"10px","boxShadow":"0px 0px 0px #eee","margin":"0 0 10px","borderRadius":"0px","background":"none"}'
                            v-if="userTableName=='user'" label="密码" prop="password">
                        <el-input type="password" v-model="sessionForm.password" placeholder="密码"></el-input>
                    </el-form-item>
                    <el-form-item
                            :style='{"border":"0px solid #eee","padding":"10px","boxShadow":"0px 0px 0px #eee","margin":"0 0 10px","borderRadius":"0px","background":"none"}'
                            v-if="userTableName=='user'" label="姓名" prop="name">
                        <el-input v-model="sessionForm.name" placeholder="姓名"></el-input>
                    </el-form-item>
                    <el-form-item
                            :style='{"border":"0px solid #eee","padding":"10px","boxShadow":"0px 0px 0px #eee","margin":"0 0 10px","borderRadius":"0px","background":"none"}'
                            v-if="userTableName=='user'" label="性别">
                        <el-select v-model="sessionForm.gender" placeholder="请选择性别">
                            <el-option v-for="(item, index) in dynamicProp.gender" :key="index" :label="item"
                                       :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                            :style='{"border":"0px solid #eee","padding":"10px","boxShadow":"0px 0px 0px #eee","margin":"0 0 10px","borderRadius":"0px","background":"none"}'
                            v-if="userTableName=='user'" label="年龄" prop="age">
                        <el-input v-model="sessionForm.age" placeholder="年龄"></el-input>
                    </el-form-item>
                    <el-form-item
                            :style='{"border":"0px solid #eee","padding":"10px","boxShadow":"0px 0px 0px #eee","margin":"0 0 10px","borderRadius":"0px","background":"none"}'
                            v-if="userTableName=='user'" label="手机号码" prop="mobilephonenumber">
                        <el-input v-model="sessionForm.mobilephonenumber" placeholder="手机号码"></el-input>
                    </el-form-item>
                    <el-form-item
                            :style='{"border":"0px solid #eee","padding":"10px","boxShadow":"0px 0px 0px #eee","margin":"0 0 10px","borderRadius":"0px","background":"none"}'
                            v-if="userTableName=='user'" label="头像">
                        <el-upload
                                class="avatar-uploader"
                                :action="uploadUrl"
                                :headers="headers"
                                :show-file-list="false"
                                :on-success="userportraitHandleAvatarSuccess">
                            <img :style='{"border":"1px solid #00adb5","cursor":"pointer","color":"#00adb5","borderRadius":"6px","textAlign":"center","background":"radial-gradient(circle, rgba(237,250,251,1) 35%, rgba(162,233,236,1) 100%)","width":"200px","fontSize":"32px","lineHeight":"100px","height":"auto"}'
                                 v-if="sessionForm.portrait" :src="baseUrl + sessionForm.portrait" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item
                            :style='{"border":"0px solid #eee","padding":"10px","boxShadow":"0px 0px 0px #eee","margin":"0 0 10px","borderRadius":"0px","background":"none"}'
                            v-if="userTableName=='user'" label="密保问题" prop="pquestion">
                        <el-input v-model="sessionForm.pquestion" placeholder="密保问题"></el-input>
                    </el-form-item>
                    <el-form-item
                            :style='{"border":"0px solid #eee","padding":"10px","boxShadow":"0px 0px 0px #eee","margin":"0 0 10px","borderRadius":"0px","background":"none"}'
                            v-if="userTableName=='user'" label="密保答案" prop="panswer">
                        <el-input v-model="sessionForm.panswer" placeholder="密保答案"></el-input>
                    </el-form-item>
                    <el-form-item :style='{"padding":"0","margin":"20px 0 20px 0"}'>
                        <el-button
                                :style='{"border":"0","cursor":"pointer","padding":"0","margin":"0 20px 0 0","outline":"none","color":"#fff","borderRadius":"20px","background":"radial-gradient(circle, rgba(43,224,232,1) 0%, rgba(0,173,181,1) 100%)","width":"128px","lineHeight":"40px","fontSize":"14px","height":"40px"}'
                                type="primary" @click="onSubmit('sessionForm')">更新信息
                        </el-button>
                        <el-button
                                :style='{"border":"1px solid #bbb","cursor":"pointer","padding":"0","margin":"0","outline":"none","color":"#999","borderRadius":"20px","background":"#fff","width":"128px","lineHeight":"40px","fontSize":"14px","height":"40px"}'
                                type="danger" @click="logout">退出登录
                        </el-button>
                    </el-form-item>
                </el-form>

                <el-dialog title="用户充值" :visible.sync="dialogFormVisibleMoney" width="726px" center>
                    <el-form :model="chongzhiForm">
                        <el-form-item label="充值金额" label-width="120px">
                            <el-input type="number" v-model="chongzhiForm.money" autocomplete="off"
                                      placeholder="充值金额"></el-input>
                        </el-form-item>
                        <el-form-item label-width="120px">
                            <el-radio-group v-model="chongzhiForm.radio">
                                <el-radio style="margin-bottom: 30px" label="微信支付">
                                    <el-image
                                            style="width: 60px; height: 60px;vertical-align: middle;"
                                            :src="require('@/assets/weixin.png')"
                                            fit="fill"></el-image>
                                    <span style="display: inline-block;margin-left: 10px">微信支付</span>
                                </el-radio>
                                <el-radio label="支付宝支付">
                                    <el-image
                                            style="width: 60px; height: 60px;vertical-align: middle;"
                                            :src="require('@/assets/zhifubao.png')"
                                            fit="fill"></el-image>
                                    <span style="display: inline-block;margin-left: 10px">支付宝支付</span>
                                </el-radio>
                                <el-radio label="中国建设银行支付">
                                    <el-image
                                            style="width: 120px; height: 60px;vertical-align: middle;"
                                            :src="require('@/assets/jianshe.png')"
                                            fit="fill"></el-image>
                                </el-radio>
                                <el-radio label="中国农业银行支付">
                                    <el-image
                                            style="width: 126px; height: 60px;vertical-align: middle;"
                                            :src="require('@/assets/nongye.png')"
                                            fit="fill"></el-image>
                                </el-radio>
                                <el-radio label="中国银行支付">
                                    <el-image
                                            style="width: 140px; height: 60px;vertical-align: middle;"
                                            :src="require('@/assets/zhongguo.png')"
                                            fit="fill"></el-image>
                                </el-radio>
                                <el-radio label="交通银行支付">
                                    <el-image
                                            style="width: 120px; height: 60px;vertical-align: middle;"
                                            :src="require('@/assets/jiaotong.png')"
                                            fit="fill"></el-image>
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisibleMoney = false">取 消</el-button>
                        <el-button type="primary" @click="chongzhi">确认充值</el-button>
                    </div>
                </el-dialog>
                <el-dialog title="会员购买" :visible.sync="dialogFormVisibleVip" width="726px" center>
                    <el-form :model="chongzhiForm">
                        <el-form-item label="会员卡" label-width="120px">
                            <el-input readonly autocomplete="off" value="￥199/年"></el-input>
                        </el-form-item>
                        <el-form-item label-width="120px">
                            <el-radio-group v-model="chongzhiForm.radio">
                                <el-radio style="margin-bottom: 30px" label="微信支付">
                                    <el-image
                                            style="width: 60px; height: 60px;vertical-align: middle;"
                                            :src="require('@/assets/weixin.png')"
                                            fit="fill"></el-image>
                                    <span style="display: inline-block;margin-left: 10px">微信支付</span>
                                </el-radio>
                                <el-radio label="支付宝支付">
                                    <el-image
                                            style="width: 60px; height: 60px;vertical-align: middle;"
                                            :src="require('@/assets/zhifubao.png')"
                                            fit="fill"></el-image>
                                    <span style="display: inline-block;margin-left: 10px">支付宝支付</span>
                                </el-radio>
                                <el-radio label="中国建设银行支付">
                                    <el-image
                                            style="width: 120px; height: 60px;vertical-align: middle;"
                                            :src="require('@/assets/jianshe.png')"
                                            fit="fill"></el-image>
                                </el-radio>
                                <el-radio label="中国农业银行支付">
                                    <el-image
                                            style="width: 126px; height: 60px;vertical-align: middle;"
                                            :src="require('@/assets/nongye.png')"
                                            fit="fill"></el-image>
                                </el-radio>
                                <el-radio label="中国银行支付">
                                    <el-image
                                            style="width: 140px; height: 60px;vertical-align: middle;"
                                            :src="require('@/assets/zhongguo.png')"
                                            fit="fill"></el-image>
                                </el-radio>
                                <el-radio label="交通银行支付">
                                    <el-image
                                            style="width: 120px; height: 60px;vertical-align: middle;"
                                            :src="require('@/assets/jiaotong.png')"
                                            fit="fill"></el-image>
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisibleVip = false">取 消</el-button>
                        <el-button type="primary" @click="chongzhivip">确认支付</el-button>
                    </div>
                </el-dialog>
            </el-tab-pane>
            <el-tab-pane label="我的收藏"></el-tab-pane>

            <el-tab-pane label="我的发布"></el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import config from '@/config/config'
    import Vue from 'vue'

    export default {
        //数据集合
        data() {
            return {
                title: '个人中心',
                baseUrl: config.baseUrl,
                sessionForm: {},
                rules: {},
                chongzhiForm: {
                    money: '',
                    radio: ''
                },
                disabled: false,
                dialogFormVisibleMoney: false,
                dialogFormVisibleVip: false,
                uploadUrl: config.baseUrl + 'file/upload',
                imageUrl: '',
                headers: {Token: localStorage.getItem('Token')},
                userTableName: localStorage.getItem('UserTableName'),
                dynamicProp: {}
            }
        },
        created() {
            if ('user' == this.userTableName) {
                this.$set(this.sessionForm, 'account', null);
            }
            if ('user' == this.userTableName) {
                this.$set(this.sessionForm, 'password', null);
            }
            if ('user' == this.userTableName) {
                this.$set(this.sessionForm, 'name', null);
            }
            if ('user' == this.userTableName) {
                this.$set(this.sessionForm, 'gender', null);
            }
            if ('user' == this.userTableName) {
                this.$set(this.sessionForm, 'age', null);
            }
            if ('user' == this.userTableName) {
                this.$set(this.sessionForm, 'mobilephonenumber', null);
            }
            if ('user' == this.userTableName) {
                this.$set(this.sessionForm, 'portrait', null);
            }
            if ('user' == this.userTableName) {
                this.$set(this.sessionForm, 'pquestion', null);
            }
            if ('user' == this.userTableName) {
                this.$set(this.sessionForm, 'panswer', null);
            }

            if ('user' == this.userTableName) {
                this.$set(this.rules, 'account', [{required: true, message: '请输入账号', trigger: 'blur'}]);
            }
            if ('user' == this.userTableName) {
                this.$set(this.rules, 'password', [{required: true, message: '请输入密码', trigger: 'blur'}]);
            }
            if ('user' == this.userTableName) {
                this.$set(this.rules, 'name', [{required: true, message: '请输入姓名', trigger: 'blur'}]);
            }
            if ('user' == this.userTableName) {
                this.$set(this.rules, 'age', [{
                    required: false,
                    validator: this.$validate.isIntNumer,
                    trigger: 'blur'
                }]);
            }
            if ('user' == this.userTableName) {
                this.$set(this.rules, 'mobilephonenumber', [{
                    required: false,
                    validator: this.$validate.isMobile,
                    trigger: 'blur'
                }]);
            }

            this.init();
            this.getSession();
        },
        //方法集合
        methods: {
            init() {
                if ('user' == this.userTableName) {
                    this.dynamicProp.gender = '男,女'.split(',');
                }
            },
            getSession() {
                this.$http.get(this.userTableName + '/session', {emulateJSON: true}).then(res => {
                    if (res.data.code == 0) {
                        this.sessionForm = res.data.data;
                        localStorage.setItem('userid', res.data.data.id);
                        if (res.data.data.vip) {
                            localStorage.setItem('vip', res.data.data.vip);
                        }
                        if (res.data.data.touxiang) {
                            localStorage.setItem('headportrait', res.data.data.touxiang);
                        } else if (res.data.data.headportrait) {
                            localStorage.setItem('headportrait', res.data.data.headportrait);
                        }
                    }
                });
            },
            onSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$http.post(this.userTableName + '/update', this.sessionForm).then(res => {
                            if (res.data.code == 0) {
                                this.$message({
                                    message: '更新成功',
                                    type: 'success',
                                    duration: 1500
                                });
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            userportraitHandleAvatarSuccess(res, file) {
                if (res.code == 0) {
                    if ('user' == this.userTableName) {
                        this.sessionForm.portrait = 'upload/' + res.file;
                    }
                }
            },
            chongzhi() {
                if (this.chongzhiForm.money == '') {
                    this.$message({
                        message: '请输入充值金额',
                        type: 'error',
                        duration: 1500
                    });
                    return;
                }
                if (this.chongzhiForm.money <= 0) {
                    this.$message({
                        message: '请输入正确的充值金额',
                        type: 'error',
                        duration: 1500
                    });
                    return;
                }
                if (this.chongzhiForm.radio == '') {
                    this.$message({
                        message: '请选择充值方式',
                        type: 'error',
                        duration: 1500
                    });
                    return;
                }
                this.sessionForm.money = parseInt(this.sessionForm.money) + parseInt(this.chongzhiForm.money);
                this.$http.post(this.userTableName + '/update', this.sessionForm).then(res => {
                    if (res.data.code == 0) {
                        this.$message({
                            message: '充值成功',
                            type: 'success',
                            duration: 1500,
                            onClose: () => {
                                this.dialogFormVisibleMoney = false;
                            }
                        });
                    }
                });
            },
            chongzhivip() {
                this.chongzhiForm.money == 199;
                if (this.chongzhiForm.radio == '') {
                    this.$message({
                        message: '请选择支付方式',
                        type: 'error',
                        duration: 1500
                    });
                    return;
                }
                if (this.sessionForm.vip == '是') {
                    this.$message({
                        message: '您已是我们的尊贵会员。',
                        type: 'success',
                        duration: 1500
                    });
                    return;
                }

                this.sessionForm.vip = "是"
                this.$http.post(this.userTableName + '/update', this.sessionForm).then(res => {
                    if (res.data.code == 0) {
                        this.$message({
                            message: '会员购买成功',
                            type: 'success',
                            duration: 1500,
                            onClose: () => {
                                localStorage.setItem('vip', this.sessionForm.vip);
                                this.dialogFormVisibleVip = false;
                            }
                        });
                    }
                });
            },
            handleClick(tab, event) {
                switch (event.target.outerText) {
                    case '个人中心':
                        tab.$router.push('/index/center');
                        break;
                    case '我的收藏':
                        localStorage.setItem('storeupType', 1);
                        tab.$router.push('/index/storeup');
                        break;
                    case '我的发布':
                        tab.$router.push('/index/myForumList');
                        break;
                }

                this.title = event.target.outerText;
            },
            logout() {
                localStorage.clear();
                Vue.http.headers.common['Token'] = "";
                this.$router.push('/index/home');
                this.activeIndex = '0'
                localStorage.setItem('keyPath', this.activeIndex)
                this.$forceUpdate()
                this.$message({
                    message: '登出成功',
                    type: 'success',
                    duration: 1500,
                });
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .center-preview {

        .el-tabs {
            & /deep/ .el-tabs__header {
                .el-tabs__nav-wrap {
                    margin: 0;

                    &::after {
                        content: none;
                    }
                }

                .el-tabs__active-bar {
                    display: none !important;
                }
            }

            .center-preview-pv {
                .el-date-editor.el-input {
                    width: auto;
                }

                .balance {
                    .el-input {
                        width: auto;
                    }
                }
            }
        }
    }

    .center-preview .el-tabs /deep/ .el-tabs__header {
        border-radius: 0;
        padding: 0px;
        box-shadow: 0px 0px 0px #eee;
        margin: 10px 100px 0 0px;
        background: #f0f0f0;
        width: 220px;
        border-color: #666;
        border-width: 0px;
        position: relative;
        float: right;
        border-style: solid;
        order: 2;
    }

    .center-preview .el-tabs /deep/ .el-tabs__header .el-tabs__item {
        padding: 0 0px;
        margin: 0 0 0px;
        color: #333;
        white-space: nowrap;
        font-weight: 500;
        font-size: 14px;
        border-color: #fff;
        line-height: 60px;
        text-overflow: ellipsis;
        border-radius: 0;
        box-shadow: 0px 0px 0px #eee;
        overflow: hidden;
        background: none;
        border-width: 0 0 1px;
        position: relative;
        border-style: solid;
        text-align: center;
        height: 60px;
    }

    .center-preview .el-tabs /deep/ .el-tabs__header .el-tabs__item:hover {
        border-radius: 0;
        padding: 0 10px;
        box-shadow: 0px 2px 0px #eee;
        margin: 0 0 0px;
        color: #00adb5;
        background: none;
        font-weight: 500;
        font-size: 16px;
        line-height: 60px;
        position: relative;
        text-align: center;
        height: 60px;
    }

    .center-preview .el-tabs /deep/ .el-tabs__header .el-tabs__item.is-active {
        padding: 0 10px;
        margin: 0 0 0px;
        color: #fff;
        font-weight: 600;
        font-size: 16px;
        border-color: #1170d2;
        line-height: 60px;
        border-radius: 0;
        box-shadow: -6px 6px 0px #eee;
        background: radial-gradient(circle, rgba(43, 224, 232, 1) 0%, rgba(0, 173, 181, 1) 100%);
        border-width: 0px;
        position: relative;
        border-style: solid;
        text-align: center;
        height: 60px;
    }

    .center-preview .el-tabs /deep/ .el-tabs__content .el-tab-pane {
        padding: 0 0 0 0px;
        background: none;
        width: 500px;
        float: left;
    }

    .center-preview-pv .el-form-item /deep/ .el-form-item__label {
        padding: 0 10px 0 0;
        color: #666;
        font-weight: 500;
        width: 80px;
        font-size: 14px;
        line-height: 40px;
        text-align: right;
    }

    .center-preview-pv .el-form-item .el-form-item__content {
        margin-left: 80px;
    }

    .center-preview-pv .el-input /deep/ .el-input__inner {
        border: 1px solid #00adb5;
        border-radius: 4px;
        padding: 0 12px;
        outline: none;
        color: #666;
        background: radial-gradient(circle, rgba(237, 250, 251, 1) 35%, rgba(162, 233, 236, 1) 100%);
        width: 400px;
        font-size: 14px;
        height: 40px;
    }

    .center-preview-pv .el-select /deep/ .el-input__inner {
        border: 1px solid #00adb5;
        border-radius: 4px;
        padding: 0 12px;
        outline: none;
        color: #666;
        background: radial-gradient(circle, rgba(237, 250, 251, 1) 35%, rgba(162, 233, 236, 1) 100%);
        width: 400px;
        font-size: 14px;
        height: 40px;
    }

    .center-preview-pv .el-date-editor /deep/ .el-input__inner {
        border: 1px solid #00adb5;
        border-radius: 4px;
        padding: 0 10px 0 30px;
        outline: none;
        color: #666;
        background: radial-gradient(circle, rgba(237, 250, 251, 1) 35%, rgba(162, 233, 236, 1) 100%);
        width: 200px;
        font-size: 14px;
        height: 40px;
    }

    .center-preview-pv /deep/ .avatar-uploader-icon {
        border: 1px solid #00adb5;
        cursor: pointer;
        border-radius: 6px;
        color: #00adb5;
        background: radial-gradient(circle, rgba(237, 250, 251, 1) 35%, rgba(162, 233, 236, 1) 100%);
        width: 200px;
        font-size: 32px;
        line-height: 100px;
        text-align: center;
        height: auto;
    }

    .center-preview-pv .el-form-item.balance /deep/ .el-input__inner {
        border: 1px solid #00adb5;
        border-radius: 4px;
        padding: 0 12px;
        outline: none;
        margin: 0 8px 0 0;
        color: #666;
        background: radial-gradient(circle, rgba(237, 250, 251, 1) 35%, rgba(162, 233, 236, 1) 100%);
        display: inline-block;
        width: 200px;
        font-size: 14px;
        height: 40px;
    }
</style>
